<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/echarts.min.js"></script>
</head>
<body>
<div id="score_section" style="width:1120px;height:360px;"></div>
<script type="text/javascript">
    var myCharts=echarts.init(document.getElementById('score_section'));
    myCharts.setOption({
        //backgroundColor:'#18D4B8',
        toolbox:{//
            feature:{
                dataView:{
                    show:true,
                    readOnly:false
                },
                restore:{
                    show:true
                },
                saveAsImage:{
                    show:true
                },
            }
        },
        color:['#18D4B8'],
        tooltip : {
            trigger: 'axis',//触发类型，坐标轴触发类型
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            show:false,
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
            borderColor:'#CCCCCC',

        },
        xAxis : [
            {
                data : ['0-10', '10-20', '20-30', '30-40', '50-60', '60-70', '70-80','80-90','90-100'],
                axisTick: {
                    show:true,//是否显示坐标轴刻度
                    alignWithLabel: false //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
                },
                splitLine:{//坐标轴在grid区域中的分割线
                    show:true,
                },
                axisLine:{
                    show:true,//控制坐标线显示或不显示//默认状态下是true
                    lineStyle:{
                        color:'#609ee9',
                    }
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                name:'单位：人',
                data:[],
                min:0,
                max:100,
                splitNumber:5,//坐标轴的分割段数
                axisLabel:{
                    formatter:'{value}%'
                },
                axisLine:{
                    show:false,
                }
            }
        ],
        series : [
            {
                name:'人数',
                type:'bar',
                barWidth: '50%',
                data:[10, 52, 60, 20, 90, 30, 100],
                markLine:{
                    silent:true,
                    symbol: 'none',
                    label: {
                        normal: {
                            show: true,
                            position: 'end',
                            formatter: '{b}',
                        },
                    },
                    lineStyle: {
                        normal: {
                            color: '#000',
                            width: 1,
                            type: 'dashed',

                        },
                    },
                }
            }
        ],
        dataZoom:[{
            type:'inside',
        }]
    })
</script>
</body>

</html>